<template>
  <a-popover>
    <slot name="con">
      <p :class="className">{{ getRuleListString() }}</p>
    </slot>
    <template #title>
      <p>{{ PolicyType[policyType] }}</p>
    </template>
    <template #content>
      <p style="margin-bottom: 10px" v-if="policyType === 'BUDGET_POLICY'">
        <span>原始预算：</span>
        <span v-if="detail.budgetType === 'FIXED_BUDGET'">{{ detail.fixedBudgetAmount }}</span>
        <span v-else>{{ PolicyBudgetType[detail.budgetType] }}</span>
      </p>
      <p style="margin-bottom: 10px" v-if="policyType === 'BIDDING_POLICY'">
        <span>原始竞价：</span>
        <span v-if="detail.budgetType === 'FIXED_BUDGET'">{{ detail.fixedBudgetAmount }}</span>
        <span v-else>{{ PolicyBidType[detail.budgetType] }}</span>
      </p>
      <ul class="rule-list">
        <li v-for="(role, i) in rules" :key="i" class="flex role-item">
          <p style="margin-right: 10px">{{ role.dayOfWeek }}</p>
          <ul>
            <li style="margin-bottom: 5px" v-for="(item, j) in role.childs" :key="j" class="flex-c">
              <a-tag style="margin-right: 10px" size="small">{{ item.date }}</a-tag>
              <p>{{ item.ruleStr }}</p>
            </li>
          </ul>
        </li>
      </ul>
    </template>
  </a-popover>
</template>

<script lang="ts" setup>
  import { ref, PropType } from 'vue'
  import { PolicyType, PolicyRuleType, PolicyBudgetType, PolicyBidType, PolicyWeekMap } from '../../types'
  const props = defineProps({
    ruleList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    detail: {
      type: Object,
      default: () => {},
    },
    policyType: {
      type: String,
      default: 'BUDGET_POLICY',
    },
    adjustFrequencyType: {
      //周、日
      type: Number,
      default: 0,
    },
    className: {
      type: String,
      default: 'text-limit-two',
    },
  })
  const rules = ref<Array<any>>([])
  // 获取规格明细
  function getRuleListString() {
    let strArr: Array<string> = []
    props.ruleList.forEach((el: any) => {
      let dateStr = `${PolicyWeekMap[el.dayOfWeek] || '每天'} ${el.startTime}~${el.endTime} `
      let ruleStr = getRuleStr(el)
      let str = dateStr + ruleStr
      strArr.push(str)
    })
    return strArr?.join('，')
  }
  function getRuleStr(row: any) {
    let ruleStr = ''
    if (props.policyType === 'BUDGET_POLICY' || props.policyType === 'BIDDING_POLICY') {
      //预算&竞价
      let unit = row.ruleType === 'PERCENTAGE_INCREASE' || row.ruleType === 'PERCENTAGE_DECREASE' ? '%' : ''
      let max = row.ruleType === 'FIXED_VALUE' ? '' : `，最高调整到${row.ruleAmountUpperLimit}`
      ruleStr = `${PolicyRuleType[row.ruleType]} ${row.ruleAmount}${unit}${max}`
    } else if (props.policyType === 'TARGETING_POLICY') {
      //广告位
      ruleStr = `搜索结果顶部(首页)：${row.ruleTargetingTopAmount}%，商品页面：${row.ruleTargetingProductDetailAmount}%`
    } else if (props.policyType === 'SWITCH_POLICY') {
      // 启停
      ruleStr = `${row.ruleStatus === 'ENABLED' ? '启动' : '暂停'}广告活动`
    }
    return ruleStr
  }
  function getRuleListArr() {
    let weekMap: any = {}
    props.ruleList.forEach((el: any) => {
      let week = PolicyWeekMap[el.dayOfWeek] || '每天'
      if (!weekMap[week]?.childs) {
        weekMap[week] = {
          dayOfWeek: week,
          childs: [],
        }
      }
      weekMap[week].childs.push({
        date: `${el.startTime}~${el.endTime}`,
        ruleStr: getRuleStr(el),
      })
    })
    rules.value = Object.values(weekMap)
  }
  getRuleListArr()
</script>

<style lang="less" scoped>
  .rule-list {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 10px;
    font-size: 12px;
    .role-item {
      margin-bottom: 10px;
    }
    li {
      &:last-child {
        margin-bottom: 0 !important;
      }
    }
  }
</style>
